import { CldVideoPlayer } from "next-cloudinary";

# WebPerf Snippets

A curated list of snippets to get Web Performance metrics to use in the browser console or as snippets on [Chrome DevTools](https://developer.chrome.com/docs/devtools/).

<picture style={{ marginTop: "20px", display: "block" }}>
  <img
    style={{ aspectRatio: 342 / 214 }}
    sizes="85vw"
    srcSet="https://res.cloudinary.com/nucliweb/image/upload/c_scale,f_auto,q_auto,w_600/v1685735993/webperf-snippets/DevTools-Snippets.png 600w,
            https://res.cloudinary.com/nucliweb/image/upload/c_scale,f_auto,q_auto,w_1200/v1685735993/webperf-snippets/DevTools-Snippets.png 1200w"
    src="https://res.cloudinary.com/nucliweb/image/upload/c_scale,f_auto,q_auto,w_342/v1685735993/webperf-snippets/DevTools-Snippets.png"
    loading="eager"
    decoding="sync"
    fetchpriority="high"
    alt="Chrome DevTools"
  />
</picture>

## How to use

### Requirements

All the snippets are tested in [Google Chrome](https://google.com/chrome/) browser, so use this browser to garantize the correct funcionality.

### Run in the browser console

You can copy any snippet and then paste in the browser console and run it to get the result

### Run as snippet in Chrome DevTools

You can use the webperf-snippets as a Snippet in the Chrome DevTools Sources tab.

1. Copy any of the WebPerf Snippets
2. [Open Chrome DevTools](https://developer.chrome.com/docs/devtools/open/)
3. Select the Sources tab
4. Select the Snippets sub tab
5. Click New snippet button, e.g. [LCP](https://github.com/nucliweb/webperf-snippets#largest-contentful-paint-lcp)
6. Write the snippet name, LCP
7. Paste the copied code at the right area
8. Run the snippet

### Video

<div style={{ marginTop: "20px", display: "block" }}>
  <CldVideoPlayer
    width="1920"
    height="1080"
    src="webperf-snippets/devtools-new-snippet"
  />
</div>
